<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Useful event target example</title>
        <style>
            div {
                background-color: red;
                height: 100px;
                width: 25%;
                float: left;
            }
        </style>
    </head>
    <body>
        <script>
            for (let i = 1; i <= 16; i++) {
                const myDiv = document.createElement('div');
                document.body.appendChild(myDiv);
            }

            const divs = document.querySelectorAll('div');
            for (let i = 0; i < divs.length; i++) {
                // 事件对象
                divs[i].onclick = function (e) {
                    e.target.style.backgroundColor = bgChange();
                }
            }

            function bgChange() {
                return 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
            }

            function random(number) {
                return Math.floor(Math.random() * number);
            }

        </script>
    </body>
</html>